/**
  * Slider Theme: Default
  * Theme ID: default
  */

.am-slider-default {

  @direction-nav-color: @gray-dark;
  @pauseplay-color: #000;

  @desc-color: #fff;
  @desc-bg-color: rgba(0,0,0,0.7);

  @control-nav-bg-color: rgba(0,0,0,0.5);
  @control-nav-hover-bg-color: rgba(0,0,0,0.7);
  @control-nav-active-bg-color: @global-primary;

  margin: 0 0 20px;
  background: #fff;
  border-radius: 4px;
  .box-shadow(0 1px 4px rgba(0,0,0,.2));
  .am-viewport {
    max-height: 2000px;
    .transition(all 1s ease);
    .loading & {
      max-height: 300px;
    }
  }

  .carousel li {
    margin-right: 5px;
  }

  /* Direction Nav */
  .am-direction-nav {
    a {
      display: block;
      width: 24px;
      height: 24px;
      margin: -12px 0 0;
      position: absolute;
      top: 50%;
      z-index: 10;
      overflow: hidden;
      opacity: 0.45;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.8);
      text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);

      .transition(all .3s ease);

      &::before {
        color: @direction-nav-color;
        .am-icon-font;
        content: @fa-var-chevron-left;
        font-size: 24px;
      }
      &.am-next {
        &::before {
          content: @fa-var-chevron-right;
        }
      }
    }

    .am-prev {
      left: 10px;
    }
    .am-next {
      right: 10px;
      text-align: right;
    }

    .am-disabled {
      opacity: 0!important;
      cursor: default;
    }
  }

  &:hover {
    .am-prev {
      opacity: 0.7;
      left: 10px;
      &:hover {
        opacity: 1;
      }
    }
    .am-next {
      opacity: 0.7;
      right: 10px;
      &:hover {
        opacity: 1;
      }
    }
  }

  /* Pause/Play */
  .am-pauseplay {
    a {
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 5px;
      left: 10px;
      opacity: 0.8;
      z-index: 10;
      overflow: hidden;
      cursor: pointer;
      color: @pauseplay-color;
      &::before {
        .am-icon-font;
        font-size: 20px;
        display: inline-block;
        content: @fa-var-pause;
      }
      &:hover {
        opacity: 1;
      }
      &.am-play {
        &::before {
          content: @fa-var-play;
        }
      }
    }
  }

  // desc
  .am-slider-desc {
    background-color: @desc-bg-color;
    position: absolute;
    bottom: 0;
    padding: 10px;
    width: 100%;
    color: @desc-color;
  }

  /* Control Nav */
  .am-control-nav {
    width: 100%;
    position: absolute;
    bottom: -15px;
    text-align: center;
    li {
      margin: 0 6px;
      display: inline-block;
      a {
        width: 8px;
        height: 8px;
        display: block;
        background-color: #666;
        background-color: @control-nav-bg-color;
        line-height: 0;
        font-size: 0;
        cursor: pointer;
        text-indent: -9999px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        .box-shadow(inset 0 0 3px rgba(0,0,0,0.3));
        &:hover {
          background-color: #333;
          background-color: @control-nav-hover-bg-color;
        }
        &.am-active {
          background-color: #000;
          background-color: @control-nav-active-bg-color;
          cursor: default; }
      }
    }
  }

  .am-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
    li {
      width: 25%;
      float: left;
      margin: 0;
    }
    img {
      width: 100%;
      display: block;
      opacity: .7;
      cursor: pointer;
      &:hover {
        opacity: 1;
      }
    }
    .am-active {
      opacity: 1;
      cursor: default;
    }
  }

  .hook-am-slider-default;
}

.hook-am-slider-default() {}